import Badge from "@/src/components/badge"
import { PureStandardProps } from "@/src/consts"
import Global from "@/src/lib/global"
import { Image, View } from "@tarojs/components"
import "./toolbar.scss"

interface ToolbarProps extends PureStandardProps {

    inCartGoodsNum?: number,
    onShopBtnClick?: () => void,
    onCartBtnClick?: () => void,
    onAddToCartBtnClick?: () => void,
    onBuyBtnClick?: () => void
    activity:any

}

const Toolbar = (props: ToolbarProps) => {

    let numBadge = ""
    if (props.inCartGoodsNum) {
        if (props.inCartGoodsNum > 0) {
            numBadge = props.inCartGoodsNum.toString()
        }
    }

    return (
        <View {...props} className={['toolbar', props.className].join(" ")}>
            <View className="toolbar-warp" style={{height: `calc(100% - ${Global.shared.safeBottom}px)`}}>
                <View className="toolbar-btn-group">
                    <View className="btn-small" onClick={ props.onShopBtnClick }>
                        <Image src={ Global.loadImage("icon_home@3x.png") }/>
                        <View>店铺</View>
                    </View>
                    
                    <View className="btn-small" onClick={ props.onCartBtnClick }>
                        <Image src={ Global.loadImage("icon_shopcart@3x.png") }/>
                        <View>购物车</View>

                        <Badge text={ numBadge } backgroundColor="rgb(239, 206, 143)" textColor="#444444" offsetY={10} />
                    </View>
                </View>

                <View className="toolbar-btn-group">
                    <Image className="btn" src={ Global.loadImage("btn_join_shopcart@3x.png") } onClick={ props.onAddToCartBtnClick }/>
                    {
                        props.activity.type==='3'?(
                            <View className="bottoms dis" onClick={ props.onBuyBtnClick }>立即开团</View>
                        ):<Image className="btn" src={ Global.loadImage("btn_buy@3x1.png") } onClick={ props.onBuyBtnClick } />
                    }
                    
                </View>
            </View>
        </View>
    )
}
export default Toolbar